<template>
  <div class="custom-bread-crumb">
    <Breadcrumb :style="{fontSize: `${'fontSize'}`}">
      <BreadcrumbItem v-for="item of list" :key="`bread-crumb-${item.name}`" :to="item.to">
        <Icon v-if="showIcon" :type="item.icon" style="margin-right: 4px"/>
        {{item.name}}
      </BreadcrumbItem>
    </Breadcrumb>
  </div>
</template>
<script>
export default {
  name: 'customBreadCrumb',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    fontSize: {
      type: Number,
      default: 14
    },
    showIcon: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style lang="stylus" scoped>
.custom-bread-crumb
  display: inline-block
  vertical-align: top
</style>
